<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>源雀scrm-企微活码</title>
    <base th:href="@{/static/}" />
    <link rel="icon" th:href="@{/img/iyque.png}" type="image/png">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        var baseUrl = /*[[@{/}]]*/;
        /*]]>*/
    </script>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>源雀scrm-新增引流码</legend>
                <div class="layui-field-box">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label"> <span class="required">*</span>名称:</label>
                            <div class="layui-input-block">
                                <input type="text" name="codeName" required  lay-verify="required"  autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span class="required">*</span>员工:</label>
                            <div class="layui-input-block">
                                <div id="userSelect"></div>
                                <span class="gray-tip">（注:客户扫码添加的员工,可多选）</span>
                                <br/>
                                <span class="gray-tip" id="userTipMsg" style="color: red;"></span>
                            </div>

                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">免验证:</label>
                            <div class="layui-input-block">
                                <input type="radio" name="skipVerify" value="true" title="是" checked>
                                <input type="radio" name="skipVerify" value="false" title="否">
                                <span class="gray-tip">（注:勾选后,客户添加员工好友无需员工确认）</span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">重复添加:</label>
                            <div class="layui-input-block">
                                <input type="radio" name="isExclusive" value="true" title="是" checked>
                                <input type="radio" name="isExclusive" value="false" title="否">
                                <span class="gray-tip">（注:开启后，同一个企业的客户会优先添加到同一个跟进人）</span>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">新客标签:</label>
                            <div class="layui-input-block">
                                <div id="tagSelect"></div>
                                <span class="gray-tip">（注:标签设置后会自动为新增好友打上该标签）</span>
                                <br/>
                                <span class="gray-tip" id="tagTipMsg" style="color: red;"></span>
                            </div>
                        </div>

                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">欢迎语:</label>
                            <div class="layui-input-block">
                                <textarea id="weclomeMsg" name="weclomeMsg" placeholder="请输入欢迎语" class="layui-textarea"></textarea>
                                <span class="gray-tip">（注:好友添加成功后,自动发送欢迎语）</span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="addNickname(event)">插入昵称</button>
                                <span class="gray-tip">（注:插入昵称后,欢迎语发送会自动带上当前客户的昵称）</span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            </div>
                        </div>



                    </form>
                </div>
            </fieldset>
        </div>
    </div>
</div>


<style>
    .gray-tip {
        color: gray;
        font-size: 12px;
        margin-right: 5px;
    }
    .required {
        color: red; /* 可以选择你想要的颜色 */
        font-weight: bold; /* 可选，使其更突出 */
        margin-left: 4px; /* 适当的间距，使其与 label 元素分开 */
    }

    .layui-form-radio > i:hover, .layui-form-radioed > i {
        color: #9553FE;
    }
    element.style {
        color: #9553FE;
        border: none;
    }
</style>
<!-- 你的HTML代码 -->
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/xmSelect/xm-select.js}"></script>
<script th:src="@{/js/tokenStorage.js}"></script>
<script>


// xmSelect相关文档 https://blog.csdn.net/L_YouUi/article/details/138808993
    var tagSelect = xmSelect.render({
        // 这里绑定css选择器
        el: '#tagSelect',
        toolbar: {//工具条,全选,清空,反选,自定义
            show: true,
            list: [
                'CLEAR'
            ]
        },
        filterable: true,//搜索功能
        autoRow: true,//选项过多,自动换行
        // 渲染的数据
        data: [
        ],
    })


    var userSelect = xmSelect.render({
        // 这里绑定css选择器
        el: '#userSelect',
        toolbar: {//工具条,全选,清空,反选,自定义
            show: true,
            list: [
                'CLEAR'
            ]
        },
        layVerify: 'required',
        filterable: true,//搜索功能
        autoRow: true,//选项过多,自动换行
        max:100,
        // 渲染的数据
        data: [
        ],
    })

layui.use(['form','jquery'], function(){
    var form = layui.form;
    var $ = layui.jquery;


    //获取员工
    $.ajax({
        url: baseUrl+'iYqueUser/findIYqueUser',
        type: 'GET',
        success: function (data) {

            console.log(data.data)
            if (data.code === 200) {
                $("#userTipMsg").text("员工获取成功");
                console.log("请求成功，返回数据：", data);


                userSelect.update({data: data.data.map(function (item) {
                        return {
                            name: item.name,
                            value: item.userId
                        };
                    })})



            } else {
                $("#userTipMsg").text("员工获取失败【"+data.msg+"】");
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            $("#userTipMsg").text('请求失败，错误信息：' + textStatus + ' ' + errorThrown);
        }
    });


    //获取标签
    $.ajax({
        url: baseUrl+'iYqueTag/findIYqueTag',
        type: 'GET',
        success: function (data) {

            console.log(data)
            if (data.code === 200) {
                $("#tagTipMsg").text("标签获取成功");
                console.log("请求成功，返回数据：", data);
                tagSelect.update({data: data.data.map(function (item) {
                        return {
                            name: item.name,
                            value: item.id
                        };
                    })})
            } else {
                $("#tagTipMsg").text("标签获取失败【"+data.msg+"】");
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            $("#tagTipMsg").text('请求失败，错误信息：' + textStatus + ' ' + errorThrown);
        }
    });




    //监听提交
    form.on('submit(formDemo)', function(data){
        var data={
            codeName:data.field.codeName,
            userId: userSelect.getValue().length > 0?userSelect.getValue().map(user => user.value).join(','):null,
            userName: userSelect.getValue().length > 0?userSelect.getValue().map(user => user.name).join(','):null,
            tagId: tagSelect.getValue().length > 0?tagSelect.getValue().map(user => user.value).join(','):null,
            skipVerify:data.field.skipVerify,
            isExclusive:data.field.isExclusive,
            tagName: tagSelect.getValue().length > 0?tagSelect.getValue().map(user => user.name).join(','):null,
            weclomeMsg:data.field.weclomeMsg,
        }
        console.log(data)
        $.ajax({
            url: baseUrl+'iyQue/save', // 替换为你的API地址
            type: 'POST',
            data:JSON.stringify(data),
            contentType: 'application/json',
            success: function(response) {
                // 关闭弹出层
                var index = parent.layer.getFrameIndex(window.name); // 获取当前iframe层的索引
                parent.layer.close(index); // 关闭当前iframe层
            },
            error: function(xhr, textStatus, errorThrown) {
                layer.msg('POST请求失败：' + textStatus + ' ' + errorThrown);
            }
        });
        return false;
    });
});


//插入昵称
function addNickname(event){
    event.preventDefault(); // 阻止默认行为（尽管在这里可能不是必需的）
    event.stopPropagation(); // 阻止事件冒泡（通常也不是必需的，但以防万一

    // 获取textarea的当前值
    var currentValue =  layui.jquery('textarea[name="weclomeMsg"]').val();
    // 添加新的内容到当前值的后面
    var newContent = '$客户昵称$'; // 你要添加的新内容
    layui.jquery('textarea[name="weclomeMsg"]').val(currentValue + newContent);


}


</script>
</body>
</html>